<script setup>
import  { tool }  from "../../tool/index"
// 导入 defineProps 用来获取 props
import { ref, inject, defineProps, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
const imageUrl = tool.serverPath + "api/app_api/image/download?fileName="
const props = defineProps(['BlogId'])
let BlogId = props.BlogId
// 导入 vuex 查询 用户是否登录
const store = inject('store')
// 导入登录用户的信息
const user = store.state.user
// 为数据做准备
const comment = ref()

var info = reactive({
  content: null
})

//分页功能
const currentPage = ref(1);
const pageSize = ref(10);
const totalComments = ref(0);
// 异步查询评论表
async function SearchComment(BlogId) {
  try {
    const data = {
        key: "Search",
        limit: pageSize.value,
        offset: currentPage.value,
        order: [["comment_id", "desc"]],
        data: {
          key: ["blog_id"],
          value: [BlogId]
        }
      }
    const UserComment = await tool.axiosApi("comment", data, "get")
    let temp = []
    if (UserComment.count == 0) {
      temp = false
    }

    for (let index = 0; index < UserComment.data.length; index++) {
      const user = await SearchUser(UserComment.data[index].user_id)
      temp[index] = {
        avatar: user.avatar,
        nickname: user.nickname,
        comment: UserComment.data[index].comment_content,
        comment_time: UserComment.data[index].comment_time,
      }
    }
    comment.value = temp
  } catch (error) {

  }
}
async function SearchUser(value) {
  try {
    const data = {
        key: "Search",
        columns: ["avatar", "nickname"],
        data: {
          key: ["id"],
          value: [`${value}`]
        }
      }
    const user = await tool.axiosApi("user", data, "get")
    return user.data[0]
  } catch (error) {

  }
}
// 初始化查询 props.BlogId 不为 undefined 时执行
watch(
  () => props.BlogId,
  (newValue, oldValue) => {
    if (newValue != undefined) {
      BlogId = newValue
      SearchComment(newValue)
    }
  }
)

//发布评论
async function addComment() {
  if (user != null) {
    if (info.content != null) {
      const data = {
        key: "add",
        data: {
          key: ["comment_content", "blog_id", "user_id", "comment_time"],
          value: [info.content, props.BlogId, user.id, new Date()]
        }
      }
      const comment = await tool.axiosApi("comment", data, "post")
        if (comment.message) {
          location.reload()
        } else {
          ElMessage.error({
            message: '发布评论失败',
            offset: 100
          })
        }
      
    }
    else {
      ElMessage.error({
        message: '评论为空',
        offset: 100
      })
    }
  } else {
    ElMessage.error({
      message: '请先登录',
      offset: 100
    })
  }
}

const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  SearchComment(BlogId)
};

</script>

<template>
  <div class="comment_body">
    <div class="user_input">
      <img class="user_avatar" :src="imageUrl + user.avatar" />
      <el-input class="submit-input" resize="none" autosize="true" maxlength="80" type="textarea"
        v-model="info.content" />
      <el-button class="submit-button" icon="Upload" @click="addComment()">发表</el-button>
    </div>
    <div v-if="!comment" class="comment_err">
      <div>
        暂无评论，快来抢前排！！！
      </div>
    </div>
    <el-row v-else v-for="item in comment" class="comment_content">
      <el-col :span="2"><img class="comment_avatar" :src="imageUrl + item.avatar" /></el-col>
      <el-col class="comment_box" :span="22">
        <div class="comment_nickname">{{ item.nickname }}</div>
        <div class="comment_text">{{ item.comment }} </div>
        <div class="comment_time">{{ item.comment_time }}</div>
      </el-col>
    </el-row>
    <el-pagination hide-on-single-page="true" background layout="prev, pager, next" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" :total="totalComments" @current-change="handlePageChange" />
  </div>
</template>
    
<style scoped>
.comment_body {
  height: auto;
}

.user_input {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_input .user_avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.submit-input {
  margin-left: 20px;
  margin-right: 20px;
}

.comment_err {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8f8f8f;
  font-size: large;
}

.comment_content {
  text-align: left;
  margin-bottom: 20px;
  margin-top: 20px;
}

.comment_content .el-col {
  text-align: left;
}

.comment_box {
  border-bottom: 1px solid #CAE6FF;
}

.comment_content .comment_avatar {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

.comment_content .comment_nickname {
  color: #8f8f8f;
  padding: 10px;
  display: inline;
  border-radius: 5px;
}

.comment_content .comment_time {
  text-align: right;
  padding: 10px;
  border-radius: 5px;
  color: #8f8f8f;
}

.comment_content .comment_text {
  color: rgb(66, 66, 66);
  padding-top: 10px;
}

.el-pagination {
  margin-top: 10px;
}</style>